如何在 Vue 应用启动时向其传递环境变量

2024-04-29 21:45| 来源: 网络整理| 查看: 265

场景

在 Vue CLI 模式和环境变量中介绍了向客户端侧代码中注入环境变量的方式，但是这种方式是在构建时注入的。如果存在不同的环境，那么就需要定义不同的 .env.xxx 文件，并且也需要针对指定环境进行构建才可以生效。

目前前端部署采用 docker 的方式，不同的环境需要分别构建和打包生成 docker image 很影响效率。在群里抛出问题之后，很快收到一些不错的方案。原理都是类似的，在 html 中加上读取 config.js 文件，该文件将变量值注入到 window 域下。利用容器启动的时候向容器传递环境变量时，改变其内容。

实现

原理类似，根据实际项目情况采用的方式稍有差异，我们采用如下方式：

在 public 目录下，定义 config.js 文件内容，用于在容器启动的时候将其进行替换； // CONFIGURATIONS_PLACEHOLDER 在 public/index.html 中新增读取 config.js 的配置；在容器启动的 entrypoint.sh 中新增根据环境变量，将其写入到 config.js 的逻辑。如下我们再容器启动的时候向其传递 VUE_APP_SITE_ENV； Dockerfile ... 省略 COPY ./dist /usr/share/nginx/html ... 省略 ADD ./scripts/entrypoint.sh /sbin/entrypoint.sh CMD ["/sbin/entrypoint.sh"]

entrypoint.sh

... 省略 CONFIG_JSON_STRING='window.configs = {\ "VUE_APP_SITE_ENV":"'"${VUE_APP_SITE_ENV}"'",\ }' sed -i "s@// CONFIGURATIONS_PLACEHOLDER@${CONFIG_JSON_STRING}@" /usr/share/nginx/html/config.js exec /usr/sbin/nginx -g 'daemon off;' 在 src/utils/env 中定义读取变量的方法，默认从 window.config 下读取，后面从 process.env 读取主要适配本地开发模式使用。 export default function getEnv(name) { return window?.configs?.[name] || process.env[name] }

在需要使用的地方引入 getEnv 即可。

容器启动的时候向其传递变量值。

VUE_APP_SITE_ENV=xxxx 参考文档 stackoverflow.com/questions/5… medium.com/js-dojo/vue… smg.digital/2020/07/07/…

【本文地址】

公司简介

联系我们